<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href="./../script/api.css" rel="stylesheet">
    <link href="./../script/mapService.css" rel="stylesheet">
    <link rel="stylesheet" href="./../script/bootstrap/bootstrap.min.css">
    <script src="./../script/jq/jquery.min.js"></script>
    <script src="./../script/bootstrap/bootstrap.min.js"></script>
    <script src="../../js_example/script/map.min.js"></script>
    <script src="../../js_example/script/demo.js"></script>

    <script>
        $(function () {
            // var ajax = new XMLHttpRequest();
            // var data;
            // var flag = false;
            // ajax.overrideMimeType("application/json");
            // ajax.open("GET", "../../map_service_example/data/mapStyle.json", true);
            // ajax.onreadystatechange = function () {
            //     if (ajax.readyState === 4 && ajax.status == "200") {
            //         data = JSON.parse(ajax.responseText);
            //         if (data) {
            //             showMapList(data, ["-"]);
            //             addEvent();
            //         }
            //     }
            // };
            // ajax.send(null);

            var styleData = mapStyle;
            var flag = false;

            if (styleData) {
                showMapList(styleData, ["-"]);
                addEvent();
            }


            function showMapList(datas, contains) {
                $("#mapServiceList").html("")
                datas.forEach(function(data) {
                    contains.forEach(function(contain) {
                        if (data.id.indexOf(contain) != -1) {
                            var backgroundColor = data.id.startsWith("raster-") ? "rgb(230, 138, 202);" : data.id.startsWith("vector-") ? "rgb(205, 122, 214);" : "rgb(155, 114, 224);";
                            $("#mapServiceList").append(" <div class=\"card-info-panel template-info-panel  col-xs-6 col-sm-3\" id=\"" + data.id + "\">\n" +
                                "                <div class=\"inner-img-box\"><img src=\"../../map_service_example/images/" + data.iamge + "\" class=\"inner-img\">\n" +
                                "                </div>\n" +
                                "                <div class=\"inner-info-box \">\n" +
                                "                    <div class=\"inner-header-box\">\n" +
                                "                        <div class=\"inner-title\">" + data.mapStyle + "</div>\n" +
                                "                        <div class=\"inner-source\">" + data.author + "</div>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"inner-line\"></div>\n" +
                                "                    <div class=\"inner-desc-box\">\n" +
                                "                        <div class=\"left-desc desc-info\">更新：" + data.updateData + "</div>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"inner-tag-box\">\n" +
                                "                        <div class=\"inner-tag\" style=\"background-color: " + backgroundColor + "\">" + data.mapType + "</div>\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </div>")
                        }
                    })

                });

                $(".template-info-panel").click(function () {
                    var id = $(this).attr("id")
                    window.open("./detail.html?" + id, "_blank ")
                })
            }


            function addEvent() {
                $(".inner-item").click(function () {
                    if (flag === false) {
                        var closeHtml = " <div class=\"inner-item-clear\"><i aria-label=\"icon: close-circle\"\n" +
                            "                            class=\"anticon anticon-close-circle\"><svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\"\n" +
                            "                                data-icon=\"close-circle\" width=\"1em\" height=\"1em\" fill=\"currentColor\"\n" +
                            "                                aria-hidden=\"true\">\n" +
                            "                                <path\n" +
                            "                                    d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\">\n" +
                            "                                </path>\n" +
                            "                            </svg></i></div>"

                        $(".inner-item").css("display", "none");
                        flag = true;
                        $(this).css("display", "block");
                        $(this).after(closeHtml);

                        var contains = $(this).attr("data-code")
                        showMapList(styleData, [contains])

                        $(".anticon").click(function () {
                            $(".anticon").css("display", "none");
                            flag = false;
                            $(".inner-item").css("display", "block");
                            showMapList(styleData, ["-"])
                        })
                    }
                });
            }


        })
    </script>
</head>

<body class="restdemo-page">
    <div class="crumbs" style="margin-left: 12%;margin-top: 20px;">
        您现在的位置：
        <a>开发</a>
        &gt;
        <a>地图资源</a>
        &gt;
        <a id="mapStyle"></a></div>

    <div class="map-template-left-container">
        <div class="list-query-panel">
            <div class="inner-filter-box">
                <div class="inner-item-list">
                    <div class="inner-item" data-code="raster" style="background-color: rgb(230, 138, 202);">高清栅格
                    </div>
                    <div class="inner-item" data-code="vector" style="background-color: rgb(205, 122, 214);">矢量</div>
                    <div class="inner-item" data-code="satellite" style="background-color: rgb(155, 114, 224);">影像
                    </div>
                    <div class="inner-item" style="visibility: hidden;width: 20px;">空格
                    </div>
                    <div class="inner-item" data-code="normal" style="background-color: rgb(124, 125, 230);">标准地图
                    </div>
                    <div class="inner-item" data-code="midnight" style="background-color: rgb(99, 156, 230);">午夜蓝</div>
                    <div class="inner-item" data-code="dark" style="background-color: rgb(100, 187, 224);">黑夜
                    </div>
                    <div class="inner-item" data-code="lightgray" style="background-color: rgb(92, 204, 172);">浅灰色
                    </div>
                    <div class="inner-item" data-code="fresh" style="background-color: rgb(173, 79, 84);">清新
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="map-template-list container" style="margin-left: 12%;margin-top: 20px;">
        <div class="row" id="mapServiceList">

        </div>
    </div>

    </div>
</body>

</html>